<!-- 健康史 -->
<template>
    <div class="healthhistory-container">

        <!-- 健康史包裹层 -->
        <div class="healthhistory-container">
                <van-cell-group  inset>
                    <!-- 手术史 -->
                      <van-field
                        v-model="healthhistoryData.vdp39"
                        autosize
                        label="手术史"
                        type="textarea"
                        label-align="top"
                        placeholder="请输入手术史"
                      />
                      <!-- 外伤史 -->
                      <van-field
                        v-model="healthhistoryData.vdp40"
                        autosize
                        label="外伤史"
                        type="textarea"
                        label-align="top"
                        placeholder="请输入外伤史"
                      />
                      <!-- 输血史 -->
                      <van-field
                        v-model="healthhistoryData.vdp41"
                        autosize
                        label="输血史"
                        type="textarea"
                        label-align="top"
                        placeholder="请输入输血史"
                      />
                      <!-- 过敏史 -->
                      <van-field
                        v-model="healthhistoryData.vdp26"
                        autosize
                        label="过敏史"
                        type="textarea"
                        label-align="top"
                        placeholder="请输入过敏史"
                      />
                </van-cell-group>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, toRefs } from 'vue';
import { showConfirmDialog, showToast } from 'vant';
import { onMounted } from 'vue';

    // 元素挂载后执行
    onMounted(() => {
        
    });

    // 单条放射职业史数据
    const healthhistoryData = reactive(
            {
                vdp39: '', //手术史
                vdp40: '', //外伤史
                vdp41: '', //输血史
                vdp26: '', //过敏史

            });

</script>

<style scoped>

    .healthhistory-container {
        
        .healthhistory-container {

            margin: 20px 18px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: -2px 8px 18px #ddd;

            .item-title {
                background-color: #e1f2f9;
                display: flex;
                align-items: center;
                padding: 5px 20px;
                justify-content: space-between;

                .title-text {
                 font-size: 28px;
                 color:rgb(62, 175, 224);
                 font-weight: 700;
                }

                .delete-box {
                    /* background-color: red; */
                    border-radius: 20px 0 0 0;
                    height: 100%;
                    text-align: center;
                    line-height: 50px;
                    font-size: 35px;
                    font-weight: 700;
                    color: #fff;
                }
            }

            .item-content {
                .item-nowarp :deep(.van-field__label) {
                width: unset;
            }
            }
        
        }

        .radiological-contorl-btns {
            margin-top: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            color: #ddd;
            font-size: 60px;
        }
    }

</style>